<template>
    <div class="Buycatcurrency">
        <div class="Buycatcurrency-head" @click="Goback"></div>
        <div class="Buycatcurrency-title">
            <span>购买猫币</span>
        </div>
        <div class="Buymember">
            <img src="/images/开通会员banner 拷贝@2x.png" alt="">
        </div>
        <div class="Buycatcurrency-seletc">
            <ul>
                <li v-for="(catitem,catindex) in catcon" :key="catindex" @click="Choose(catitem,catindex)" :class="catconindex == catindex?'seled':''">
                    <label>
                        <span>{{catitem}}</span>
                        <span>售价{{catitem/100}}元</span>
                    </label>
                </li>
            </ul>
        </div>
        <div class="realpays">
            <label>
                <span>实付金额：</span>
                <span>{{realpay}}</span>
                <span>元</span>
            </label>
        </div>
        <!-- <div class="shopqrcode">
            <label>
                <img src="/images/二维码图片png.png"/>
            </label>
        </div>
        <div class="Theamountof-way">
            <label>
                <span> 支付宝支付</span>
            </label>      
        </div> -->
        <div class="Theamountof-agreement">
            <label>
                <span> 购买即代表同意《外教超市学习卡购买协议》</span>
            </label>
        </div>
        <div class="Theamountof-payment">
            <label>
                <span @click="Tobuyconcat">确认付款</span>
            </label>
        </div>
    </div>
</template>
<script>
export default {
    name:'Buycatcurrency',
    data(){
        return{
            catcon:['100','600','1800','2500','5000','8800','10800','20800','30800','48800','69800','99800','159800','299800','499800'],
            catconindex:0,
            realpay:1,
            userinfo:JSON.parse(localStorage.getItem('userinfo')),
        }
    },
    methods:{
        Goback(){
            this.$router.go(-1)
        },
        Choose(catitem,e){
            this.catconindex = e
            this.realpay = catitem/100
        },
        Tobuyconcat(){
            let data = {
                user_id:this.userinfo.user_id,
                rcharge_type:'account',
                amount:this.realpay,//充值金额
                source:'pc',
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/user/pay/aliPay',
                data:data,
            }).then((res) =>{
                var data = res.data.data
                document.querySelector('body').innerHTML = res.data.data;
                const div = document.createElement('div') // 创建div
                div.innerHTML = res.data.data // 将返回的form 放入div
                document.body.appendChild(div)
                document.forms[0].submit()
            }).catch((error) =>{
                console.log(error)
            })
        }
    },
}
</script>
<style lang="less" scoped>
    .Buycatcurrency{
        width: 90%;
        background: #ffffff;
        min-height: 1041px;
        height: auto;
        border-radius: 20px;
    }
    .Buycatcurrency-head{
        position: relative;
        width: 90%;
        margin: 0 auto;
        height: 40px;
        background-image: url('/images/形状 3png.png');
        background-repeat: no-repeat;
        background-size: 12px 17px;
        background-position-y: 20px;
        cursor: pointer;
    }
    .Buycatcurrency-title{
        position: relative;
        width: 90%;
        height: 100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        span{
            color: #2DC7C8;
            font-size: 36px;
            font-weight:bold;
            &::before{
                top: -6px;
                color: #47cecf;
                font-size: 13px;
                content: '————————';
                position: relative;
                left: -11px;
            }
            &::after{
                top: -6px;
                color: #47cecf;
                font-size: 13px;
                content: '————————';
                position: relative;
                left: 11px;
            }
        }
    }
    .Buymember{
        position: relative;
        width: 90%;
        height: 40px;
        margin: 0 auto;
        margin-top: 50px;
        cursor: pointer;
        img{
            width: 100%;
        }
    }
    .Buycatcurrency-seletc{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 150px;
        ul{
            width: 100%;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            justify-content: space-between;
            &:after{
                content:' ';
                width:200px; //这个宽度和子元素宽度一致
                height:0;
                display:block;
            }
            li{
                width: 200px;
                height: 120px;
                display: flex;
                flex-wrap: wrap;
                border:1px solid rgba(51,197,198,1);
                border-radius:20px;
                margin-top: 20px;
                align-items: center;
                cursor: pointer;
                label{
                    display: flex;
                    width: 100%;
                    flex-wrap: wrap;
                    cursor: pointer;
                    span{
                        display: inline-block;
                        width: 100%;
                        text-align: center;
                    &:first-child{
                        color: #33C5C6;
                        font-size: 36px;
                        font-weight: bold;
                    }
                    &:last-child{
                        color: #FF4C29;
                        font-size: 20px;
                        font-weight: bold;
                    }
                }
                }
            }
        }
    }
    .seled{
        background:rgba(51,197,198,1);
        span{
            color: #ffffff!important;
        }
    }
    .realpays{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        margin-top: 110px;
        label{
            width: 314px;
            height: 64px;
            border:1px solid rgba(45,199,200,1);
            border-radius:32px;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
                font-weight:bold;
                &:first-child{
                    color: #3B3B3B;
                    font-size: 14px;
                }
                &:nth-child(2){
                    color: #FF4E4E;
                    font-size: 36px;
                }
                &:last-child{
                    color: #FF4E4E;
                    font-size: 14px;
                    margin-left: 10px;
                }
            }
        }
    }
    .shopqrcode{
        position: relative;
        width:170px;
        height: 170px;
        text-align: center  ;
        margin: 0 auto;
        margin-top: 20px;
        label{
            display: flex;
            width: 100%;
            height:170px;
            justify-content: center;
            align-items: center;
            border:1px solid rgba(78,207,207,1);
            border-radius:10px;
            img{
                width: 146px;
                height: 146px;
            }
        }
    }
    .Theamountof-way,.Theamountof-agreement,.Theamountof-payment{
        position: relative;
        width:20%;
        height: auto    ;
        text-align: center  ;
        margin: 0 auto;
        margin-top: 20px;
    }
    .Theamountof-agreement{
        width: 40%;
        color: #3ACBCC;
        font-size: 14px;
    }
    .Theamountof-payment{
        padding-bottom: 60px;
        span{
            display: inline-block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background:rgba(58,203,204,1);
            border-radius:20px;
            color: #ffffff;
            cursor: pointer;
        }
    }
</style>